<template>
<div>
    <ul>
        <li v-for="item in ClassroomList" :key="item.id">
            <span class="Classroom-new" @click="GoDetail(item)" :id="item.id">{{item.title}}</span>
            <span class="Classroom-time">{{item.publishTime}}</span>
        </li>
    </ul>
    <div v-if="ClassroomList.length>0">
        <Pagination :total="total" :params="params" :get="get"></Pagination>
    </div>
</div>
</template>

<script>
import Pagination from "@/components/Pagination";

export default {
    components: {
        Pagination,
    },
    data() {
        return {
            ClassroomList: [],
            ClassroomListD: {},
            // 总条数
            total: 0,
            //  参数
            params: {
                pageNum: 1,
                pageSize: 10,
            },
        };
    },
    methods: {
        GoDetail(item) {
            //根据id进行跳转不同的静态页面后期改逻辑
            //详情页跳转
            let ID = {
                id: item.id
            }
            // console.log(ID,111)
            this.Api.getClassroomDetail(ID).then((res) => {
                this.ClassroomListD = res.data;
                // console.log(this.ClassroomListD,1112)
                this.$store.commit('setclassList', this.ClassroomListD)
                this.total = res.data.total;
            });

            this.$router.push({
                name: "DetailText",
                query: {
                    id: item.id
                }
            });
        },
        //亦廉课堂数据
        get() {
            this.Api.getClassroom(this.params).then((res) => {
                this.ClassroomList = res.data.records;
                // console.log(this.ClassroomList)
                this.total = res.data.total;
            });

        },
    },
    created() {
        //亦廉课堂数据
        this.get()
    },
};
</script>

<style scoped>
ul li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;
    line-height: 16px;
    padding-bottom: 25px;
    padding-top: 25px;
    margin-bottom: 25px;
    cursor: pointer;
}

ul li:hover {
    background-color: rgba(221, 33, 38, 0.03);
    ;
}

ul li .Classroom-new {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    width: 736px;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

ul li .Classroom-time {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
}

li span:first-child:hover {
    color: red;
}
</style>
